<template>
  <div>
    <!--页头-->
    <el-page-header content="添加商品"></el-page-header>
    <!--步骤条-->
    <el-steps :active="active" align-center>
      <el-step title="选择商品分类" description="选择商品分类"></el-step>
      <el-step title="填写商品信息" description="填写商品信息"></el-step>
      <el-step title="填写商品属性" description="填写商品属性"></el-step>
    </el-steps>
    <el-divider>
      <i class="el-icon-mobile-phone"></i>
    </el-divider>
    <step1
      v-on:listenToChildEvent="showMsgFromChild"
      :object="this.objs"
      v-if="active === 1"
      name="step1"
    ></step1>
    <step2
      :objs="this.objs"
      v-else-if="active === 2"
      v-on:nextStep3="next3"
      v-on:listenToChildEvent="returnStep1"
    ></step2>
    <step3
      v-else
      :ruleForm="this.ruleForm"
      v-on:sbumitGoods="addGoods"
      v-on:listenToChildEvent="returnStep2"
    ></step3>
  </div>
</template>

<script>
import Step1 from '@/components/goods/step1.vue'
import Step2 from '@/components/goods/step2.vue'
import Step3 from '@/components/goods/step3.vue'
export default {
  components: {
    step1: Step1,
    step2: Step2,
    step3: Step3
  },
  data () {
    return {
      active: 1,
      objs: [],
      ruleForm: {},
      skuData: {},
      goods: {}
    }
  },
  methods: {
    // 下一步 到第二步骤
    showMsgFromChild (objs) {
      this.objs = objs
      this.active = 2
    },
    // 返回到step 第二步骤
    returnStep2 (ruleForm) {
      this.objs.push(ruleForm)
      this.ruleForm = ruleForm
      this.active = ruleForm.active
    },
    // 下一步 到第三步骤
    next3 (ruleForm) {
      this.ruleForm = ruleForm
      this.active = ruleForm.active
    },
    // 返回到step 第一步骤
    returnStep1 (returnObjs) {
      const index = returnObjs.length - 1
      this.objs = returnObjs
      this.active = returnObjs[index].active
    },
    // 提交判断
    async addGoods (data) {
      this.skuData = data
      this.ruleForm.image = this.skuData.spuImageUrl
      // this.ruleForm.images = this.skuData.spuImageUrls.join(",")
      this.ruleForm.paraItems = this.skuData.paraItems
      this.goods.spu = this.ruleForm
      this.goods.skuList = this.skuData.skus
      this.$http.post(`/goods/spu/insert`, this.goods)
      alert('添加成功')
      this.active = 1
      this.objs = []
      this.ruleForm = {}
      this.skuData = {}
      this.goods = {}
    }
  },
  async created () {
  }
}
</script>

<style  scoped>
</style>
